<template>
  <div id="nav">
    <div id="all">
      <div class="oneItem" v-for="item in data" :key="item.id">
        <div class="one">
          <span>{{ item.name }}</span>
          <span>{{ item.mobile }}</span>
        </div>
        <div class="two">{{ item.district }}{{ item.address }}</div>
        <div class="three">
          <div>
            <van-switch
              v-model="item.status"
              size="1.5em"
              :active-value="1"
              :inactive-value="0"
              @change="change(item)"
            />
            <div style="margin-left: 0.5rem">设为默认</div>
          </div>
          <div>
            <span @click="del(item.id)">删除</span>
            <span @click="editAddress(item)">编辑</span>
          </div>
        </div>
      </div>
      <div id="twoItem" @click="addAddress">添加地址</div>
    </div>
  </div>
</template>

<script setup>
import { useUserInfoStore } from '@/stores/user.js' // 导入 useUserInfoStore 函数，用于获取用户信息的 store
import { storeToRefs } from 'pinia' // 导入 storeToRefs 函数，用于将 store 转换为响应式引用
import { closeToast, showConfirmDialog, showLoadingToast, showToast } from 'vant' // 导入 vant 库中的一些提示组件函数
import { ref } from 'vue' // 导入 Vue 的 ref 函数，用于创建响应式数据
import { useRouter } from 'vue-router' // 导入 vue-router 库中的 useRouter 函数，用于获取路由实例
import { addressDel, addressEdit, addressIndex } from '../api' // 导入自定义的 API 函数，用于地址相关操作

const userInfoStore = useUserInfoStore() // 使用 useUserInfoStore 函数创建用户信息的 store 实例
const { curStudent } = storeToRefs(userInfoStore) // 将 store 转换为响应式引用，并解构出 curStudent 属性
const router = useRouter() // 获取路由实例
const data = ref([]) // 创建一个响应式数组数据

// 修改地址
async function change(item) {
  await addressEdit(item) // 调用 addressEdit 函数进行地址修改操作
  showToast(`操作成功`) // 显示操作成功的提示消息

  // 异步函数，获取并更新地址列表
  ;(async function () {
    const res = await addressIndex({ user_id: curStudent.value.id }) // 调用 addressIndex 函数获取地址列表
    data.value = res // 将获取到的地址列表更新到 data 响应式数组中
  })()
}

// 获取并更新地址列表
;(async function () {
  const res = await addressIndex({ user_id: curStudent.value.id }) // 调用 addressIndex 函数获取地址列表
  data.value = res // 将获取到的地址列表更新到 data 响应式数组中
})()

// 删除地址
function del(id) {
  showConfirmDialog({
    title: '删除提示',
    message: `确认删除吗？`
  }).then(async () => {
    showLoadingToast({
      message: '删除中...',
      forbidClick: true
    })
    await addressDel({ id }) // 调用 addressDel 函数进行地址删除操作
    closeToast() // 关闭加载提示
    showToast(`删除成功`) // 显示删除成功的提示消息
  })
}

// 跳转到编辑地址页面
function editAddress(item) {
  sessionStorage.setItem('EditAddress', JSON.stringify(item)) // 使用 sessionStorage 存储需要编辑的地址信息
  router.push('/EditAddress') // 跳转到 EditAddress 页面
}

// 跳转到新增地址页面
function addAddress() {
  router.push('/AddAddress') // 跳转到 AddAddress 页面
}

</script>

<style lang="less" scoped>
@var1: #f5f6f8;
@var2: #eeeeee;
@var3: #e1e1e2;
@var4: #ffc456;

#nav {
  background-color: @var1;
  height: 95vh;
}
#all {
  padding-top: 2vh;
}
.oneItem {
  background-color: white;
  width: 94%;
  margin-left: 3%;
  border-radius: 10px;
  padding: 1vh 3vw;
  margin-bottom: 1.5vh;
}
.one > span:first-child {
  font-weight: 600;
  margin-right: 10vw;
}
.one {
  margin-bottom: 1vh;
}
.two {
  font-size: 14px;
  padding-bottom: 1vh;
  border-bottom: 1px solid @var2;
}
.three {
  padding: 1vh 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  & > div:first-child {
    display: flex;
    align-items: center;
  }
  & > div:last-child > span:last-child {
    margin-left: 8vw;
    border: 1px solid @var3;
    padding: 0.5vh 3vw;
    border-radius: 15px;
  }
}
#twoItem {
  color: white;
  background-color: @var4;
  font-weight: 600;
  padding: 1vh 0;
  width: 70%;
  margin-left: 15%;
  text-align: center;
  border-radius: 20px;
  position: fixed;
  bottom: 10vh;
}
</style>
